import { computed, ref } from "vue";

import { FormRowType, TDFormType } from "@/libs/components/dynamicForm";
import { useResettableRef } from "@/libs/hooks";

const certificateType = [
  { label: "身份证", value: "1" },
  { label: "港澳台通行证", value: "2" },
  { label: "护照", value: "3" },
];
const ageType = [
  { label: "一年级", value: "1" },
  { label: "二年级", value: "2" },
  { label: "三年级", value: "3" },
  { label: "四年级", value: "4" },
  { label: "五年级", value: "5" },
  { label: "六年级", value: "6" },
];

export const formRef = ref(null);

export const formAttribute = ref<TDFormType>({
  disabled: false,
  // labelWidth: "200px",
});

export const [formData, resetFormData] = useResettableRef({
  fullName: "",
  certificate: "",
  phone: "",
  email: "",
  schoolName: "",
  guardianName: "",
  age: "",
  guardianPhone: "",
  identityIdL: "",
  identityId: "",
  IDNO: "",
});

export const formItems = computed<FormRowType[]>(() => [
  {
    children: [
      {
        name: "fullName",
        colAttribute: {
          span: 6,
        },
        component: "Input",
        formItemAttribute: {
          label: "真实姓名",
        },
      },
      {
        name: "certificate",
        colAttribute: {
          span: 6,
        },
        component: "Select",
        componentAttribute: {
          options: certificateType,
        },
        formItemAttribute: {
          label: "证件类型",
        },
      },
    ],
  },
  {
    children: [
      {
        name: "phone",
        colAttribute: {
          span: 6,
        },
        component: "Input",
        formItemAttribute: {
          label: "手机号码",
        },
      },
      {
        name: "IDNO",
        colAttribute: {
          span: 6,
        },
        component: "Input",
        formItemAttribute: {
          label: "证件号码",
        },
      },
    ],
  },
  {
    children: [
      {
        name: "email",
        colAttribute: {
          span: 6,
        },
        component: "Input",
        formItemAttribute: {
          label: "电子邮箱",
        },
      },
      {
        name: "schoolName",
        colAttribute: {
          span: 6,
        },
        component: "Input",
        formItemAttribute: {
          label: "学校名称",
        },
      },
    ],
  },
  {
    children: [
      {
        name: "guardianName",
        colAttribute: {
          span: 6,
        },
        component: "Input",
        formItemAttribute: {
          label: "监护人姓名",
        },
      },
      {
        name: "age",
        colAttribute: {
          span: 6,
        },
        component: "Select",
        componentAttribute: {
          options: ageType,
        },
        formItemAttribute: {
          label: "就读年纪",
        },
      },
    ],
  },
  {
    children: [
      {
        name: "guardianPhone",
        colAttribute: {
          span: 6,
        },
        component: "Input",
        formItemAttribute: {
          label: "监护人手机号",
        },
      },
      {
        name: "identityId",
        colAttribute: {
          span: 6,
        },
        component: "Input",
        formItemAttribute: {
          label: "监护人身份证号",
        },
      },
    ],
  },
]);
